<template>
	<view class="detail" v-show="detail.name">
		<view class="top">
			<text class="iconfont icon-security"></text>
			<text class="security">赏金已托管 安全保障</text>
		</view>
		<view class="mutual-basic">
			<view class="project-name">
				{{detail.name}}
			</view>
			<view class="mutual-other">
				<view class="mutual-lists">
					<view class="mutual-list">
						<text class="num">{{detail.use_quota || 0}}人</text>
						<text>人报名</text>
					</view>
					<view class="mutual-list">
						<text class="num">{{detail.sub_quota || 0}}人</text>
						<text>赚到赏金</text>
					</view>
					<view class="mutual-list">
						<text class="num">{{detail.quota-detail.use_quota || 0}}人</text>
						<text>剩余名额</text>
					</view>
				</view>
				<view class="mutual-money">
					<text>赏{{detail.price || 0}}zkb</text>
				</view>
			</view>
			<view class="title">
				{{detail.title}}
			</view>
			<view class="see">
				<text>浏览次数：{{detail.browse}}</text>
				<text>综合评分：{{detail.evaluate}}</text>
			</view>
			<view class="examine">
				<text>审核时长{{detail.examine_time}}小时以内</text>
				<!-- <text>分享</text> -->
			</view>
			<view class="user" @click="goLink('/pages/mutual/mutual-lists/mutual-lists?uid='+detail.uid)">
				<view class="user-left">
					<image :src="detail.avatar ?  detail.avatar : require('../../../static/images/avatar.png')" mode=""></image>
					<view class="user-right">
						<text>{{detail.username}}</text>
						<text>ID:{{detail.uid}}</text>
					</view>
				</view>
				<text class="iconfont icon-dayu"></text>
			</view>
		</view>
		<view class="mutual-steps">
			<view class="mutual-title">
				<text>任务步骤</text>
			</view>
			<view class="mutual-step">
				<view class="step" v-for="(item,index) of detail.steps" :key="index">
					<view class="step-title">
						<text>{{index+1}}</text>
						<text>{{item.explain || item.title}}</text>
					</view>
					<view class="step-content" v-if="item.step===1">
						<view class="link">
							<view class="link-c">{{item.value}}</view>
							<view class="open-link" @click="goPage(item.value)">打开链接</view>
						</view>
					</view>
					<view class="step-content" v-if="item.step===2 || item.step===3 || item.step===4">
						<view class="images">
							<view class="image-1" @click="seeImg(item.imgUrl)">
								<image :src="item.imgUrl" mode="widthFix"></image>
							</view>
							<view @click="upload(index)" class="image-2 image-right" 
							v-if="item.step===4 && isSignUp && (detail.complete_status===0 
							|| detail.complete_status===3)">
								<image v-if="item.uploadHttpImg" :src="item.uploadHttpImg" mode="aspectFit"></image>
								<text v-else class="iconfont icon-upload"></text>
							</view>
							<!-- 完成状态0 进行中 1审核中 2已通过 3未通过 -->
							<view class="image-2 image-right" 
							v-if="item.step===4 && isSignUp && detail.complete_status!==0 
							&& detail.complete_status!==4 && detail.complete_status!==3">
								<image v-if="item.uploadHttpImg" :src=" item.uploadHttpImg" mode="aspectFit"></image>
								<text v-else class="iconfont icon-upload"></text>
							</view>
						</view>
					</view>
					<view class="step-content" v-if="item.step===5">
						<view class="collect">
							<input type="text" v-model="item.uploadValue" :disabled="isSignUp&&(detail.complete_status===0 || detail.complete_status===3)?false:true" :placeholder="item.value">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isSignUp" :class="$isPC ? 'IsPC':''">
			<!-- 完成状态0 进行中 1审核中 2已通过 3未通过 -->
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.complete_status===0" @click="submit()">
				<text>提交悬赏({{formatTime(detail.end_time)}})</text>
			</view>
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.complete_status===1">
				<text class="btn-bg">审核中</text>
			</view>
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.complete_status===2">
				<text class="btn-bg">已完成</text>
			</view>
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.complete_status===3" @click="submit()">
				<text>重新提交</text>
			</view>
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.complete_status===4" @click="baoming('edit')">
				<text>重新报名</text>
			</view>
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.complete_status===5">
				<text>申诉中</text>
			</view>
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.complete_status===6" @click="baoming('edit')">
				<text>重新报名</text>
			</view>
		</view>
		<view v-else>
			<!-- 悬赏状态 0审核中 1展示中 2已暂停 3审核失败 -->
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.status===0">
				<text class="btn-bg">审核中</text>
			</view>
			<view :class="$isPC ? 'IsPC':''" class="btn" @click="baoming('add')" v-if="detail.status === 1">
				<text>立即报名</text>
			</view>
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.status === 2">
				<text class="btn-bg">已暂停</text>
			</view>
			<view :class="$isPC ? 'IsPC':''" class="btn" v-if="detail.status === 3">
				<text class="btn-bg">该悬赏未通过审核</text>
			</view>
		</view>
		
		<view class="pingjia" v-if="data.length>0">
			<view class="mutual-title">
				<text>全部评价</text>
			</view>
			<view class="lists">
				<view class="list" v-for="(item,index) of data" :key="index">
					<view class="list-top">
						<view class="user">
							<image :src="item.avatar ?  item.avatar : require('../../../static/images/avatar.png')" mode=""></image>
							<text>{{item.username}}</text>
						</view>
						<view class="list-evaluate-num">
							<text>{{!item.type ? '+':'-'}}{{item.fraction}}</text>
						</view>
					</view>
					<view class="list-content">
						<text>{{item.content}}</text>
					</view>
					<view class="list-time">
						<text>{{formatDate(item.create_time*1000)}}</text>
					</view>
				</view>
				<block-loading :status="status" :len="data.lenght"></block-loading>
			</view>
		</view>
	</view>
</template>

<script>
	import {formatTime,formatDate} from "@/utils/util.js"
	import {rewardGet,enroll,getEvaluateLists,userSubmit} from "@/api/reward.js"
	import BlockTitle from "@/components/BlockTitle/BlockTitle.vue"
	import {mapState} from "vuex";
	export default{
		name:"detail",
		components: {
			BlockTitle
		},
		data(){
			return{
				detail:{},
				data:[],
				page:1,
				status:"nomal",
				id:'',
				isSignUp:false,
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
			this.id = option.id;
			this.getData()
		},
		onReachBottom(){
			this.getData()
		},
		computed: {
			...mapState(['userInfo','isLogin']),
		},
		methods:{
			goLink(url){
				uni.navigateTo({
					url:url
				})
			},
			goPage(val){
				if(!this.isLogin){
					uni.navigateTo({
						url:"../../entrance/login/login"
					})
					return;
				}
				if(this.userInfo.id === this.detail.uid){
					uni.navigateTo({
						url:"/pages/link/link?url="+val
					})
					return
				}
				//0审核中 1已暂停 2提交悬赏 3立即报名 4已完成
				if(this.isSignUp && this.detail.complete_status === 0){
					uni.navigateTo({
						url:"/pages/link/link?url="+val
					})
				}
			},
			formatDate(val){
				return formatDate(val)
			},
			formatTime(value){
				return formatTime(value)
			},
			async getDetail(id){
				let res = await rewardGet({id:id,action:"getUser"})
				if(res.code === 1){
					this.detail = res.data;
				}
			},
			seeImg(url) {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [url], //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			async baoming(action){
				let res = await enroll({id:this.detail.id,action:action});
				if(res.code === 1){
					this.getDetail(this.detail.id)
				}
				if(res.code === 401){
					uni.navigateTo({
						url:"../../entrance/login/login"
					})
					return;
				}
				this.$msg(res.msg)
			},
			async getData(){
				let res = await getEvaluateLists({id:this.id,page:this.page,size:20});
				if(this.page===1&&res.data.length === 0){
					this.status = "nodata"
					return
				}
				if(this.page===1&&res.data.length > 0 && res.data.length < 20){
					this.status = "nomore"
				}
				if(res.data.length === 0){
					this.status = "nomore"
					return;
				}
				this.page++;
				this.data = this.data.concat(res.data);
			},
			//图片上传
			upload(i) {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//图片上传
						const uploadTask = uni.uploadFile({
							url:this.$baseURL+'/api/upload/uploadImg',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync('oauth_token')
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data);
								if(res.code === 1){
									this.detail.steps.forEach((item,index)=>{
										if(index===i){
											item.uploadHttpImg = res.data.url
											item.uploadImg = res.data.pathUrl
										}
									})
								}
							}
						});
						uploadTask.onProgressUpdate((res) => {
						    // console.log('上传进度' + res.progress);
						    // console.log('已经上传的数据长度' + res.totalBytesSent);
						    // console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						    // 取消上传任务。
						    if (res.progress > 5000) {
								this.$msg("上传失败")
						        uploadTask.abort();
						    }
						});
					}
				});
			},
			//提交
			async submit(){
				for(let i=0;i<this.detail.steps.length;i++){
					if(this.detail.steps[i].uploadValue == ""){
						this.$msg("第"+Number(i+1)+"项信息未填写")
						return 
					};
					if(this.detail.steps[i].uploadImg == ""){
						this.$msg("第"+Number(i+1)+"张图片未上传")
						return false
					};
				}
				let res = await userSubmit({
					steps:JSON.stringify(this.detail.steps),
					id:this.detail.rid,
					examine_time:this.detail.examine_time
				})
				if(res.code === 1){
					this.getDetail(this.detail.id)
				}
				this.$msg(res.msg)
			}
		},
		watch:{
			detail:{
				handler(newValue){
					//存在complete_status 说明用户已经报名
					if(newValue.hasOwnProperty('complete_status')){
						this.isSignUp = true;
					}
				},
				deep:true
			}
		}
	}
</script>

<style scoped lang="less" src="./detail.less"></style>
